<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="p-10">
		<h1>浏览器</h1>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>浏览器模型</h3>
				</section>
				<section>
					<h3>Window</h3>
				</section>
				<section>
					<h3>Navigator</h3>
				</section>
				<section>
					<h3>Screen</h3>
				</section>
				<section>
					<h3>History</h3>
				</section>
				<section>
					<h3>Location</h3>
				</section>
				<section>
					<h3>URL</h3>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>Ajax</h3>
					<button id="btnAjax1">同域Ajax</button>
					<button id="btnAjax2">跨域Ajax</button>
				</section>
				<section>
					<h3>同源策略</h3>
					<button id="btnJsonp">JSONP</button>
					<button id="btnJsonp2">JSONP 2</button>
				</section>
				<section>
					<h3>CORS通信</h3>
				</section>
				<section>
					<h3>Cookie</h3>
				</section>
				<section>
					<h3>Storage</h3>
				</section>
				<section>
					<h3>IndexedDB</h3>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>ArrayBuffer</h3>
				</section>
				<section>
					<h3>Blob</h3>
				</section>
				<section>
					<h3>File</h3>
				</section>
				<section>
					<h3>FileReader</h3>
				</section>
				<section>
					<h3>FormData</h3>
				</section>
				<section>
					<h3>Web Worker</h3>
				</section>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10">
				</ul>
			</div>
		</div>
		<script>
			function answer(data) {
				console.log(data);
				util.clearLog().appendLog(data.name + " , " + data.age);
			}
			var util = {
				logId: "#log",
				pad0(n) {
					return n > 9 ? n : "0" + n;
				},
				getTime() {
					let now = new Date();
					return this.pad0(now.getHours()) + ":" + this.pad0(now.getMinutes()) + ":" + this.pad0(now.getSeconds());
				},
				clearLog() {
					$(this.logId).empty();
					return this;
				},
				appendLog(text) {
					text = this.getTime() + " " + text;
					$(this.logId).append(`<li>${text}</li>`);
					return this;
				}
			};
			var t1 = {
				init() {
					$("#btnAjax1").click(function() {
						$.get("product.json", function(res) {
							console.log(res);
						});
					});
					$("#btnAjax2").click(function() {
						$.get("https://famsay.speedle.top/test/product.json", function(res) {
							console.log(res);
						});
					});
					$("#btnJsonp").click(function(){
						var script = document.createElement("script");
						script.src = "https://famsay.speedle.top/test/jsonp.js";
						document.head.appendChild(script);					
					});
					$("#btnJsonp2").click(function(){
						var script = document.createElement("script");
						script.src = "https://famsay.speedle.top/test/product.json";
						document.head.appendChild(script);					
					});
				}
			};
			t1.init();
		</script>
	</body>
</html>
